<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card>
        <template #header>
          <el-button @click="back">
            返回
          </el-button>
        </template>
        <div>
          <el-descriptions
            title="问卷基础信息"
            :column="1"
            :labelStyle="labelStyle"
            border
          >
            <el-descriptions-item label="问卷调查名称">{{
                                                 questionInfo.name
                                                 }}
            </el-descriptions-item>
            <el-descriptions-item label="问卷开始时间">{{
                                                 questionInfo.beginTime
                                                 }}
            </el-descriptions-item>
            <el-descriptions-item label="问卷结束时间">{{
                                                 questionInfo.endTime
                                                 }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            title="问卷问题信息"
            style="margin-top:20px"
          ></el-descriptions>
          <template v-for="item in questionInfo.questionList">
            <el-descriptions
              :column="1"
              :key="item.id"
              :labelStyle="labelStyle"
              style="margin-bottom:20px"
              border
            >
              <el-descriptions-item label="问题名称">{{
                                                 item.content
                                                 }}
              </el-descriptions-item>
              <el-descriptions-item label="问题类型">{{
                                                 item.type | setType
                                                 }}
              </el-descriptions-item>
              <template v-for="i in item.optionList">
                <el-descriptions-item label="选项" :key="i.id">{{
                                                             i.content
                                                             }}
                </el-descriptions-item>
              </template>
            </el-descriptions>
          </template>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>问卷调查结果</span>
            <el-button
              icon="el-icon-download"
              type="primary"
              :loading="exportLoading"
              @click="exportQuestionnaireResult"
            >导出调查结果
            </el-button>
          </div>
        </template>
        <div v-if="userAnswer && userAnswer.length !== 0">
          <template v-for="item in userAnswer">
            <div :key="item.id" style="margin-bottom:20px">
              <el-descriptions :labelStyle="labelStyle" :column="2" border>
                <el-descriptions-item
                  label="填写人"
                  :contentStyle="{ width: '150px' }"
                >
                  {{ item.userInfo.name }}
                </el-descriptions-item>
                <el-descriptions-item label="填写时间">
                  {{ item.answerTime }}
                </el-descriptions-item>
              </el-descriptions>
              <div class="desAfter">
                <span style="cursor: pointer" @click="view(item)">
                  查看详情
                </span>
              </div>
            </div>
          </template>
          <div style="text-align:center">
            <el-pagination
              style="display:inline"
              background
              layout="total, prev, pager, next"
              :page-size="5"
              :total="total"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据"></el-empty>
        </div>
      </el-card>
    </el-col>
    <!-- 答题人弹框 -->
    <el-dialog title="问卷调查详情" :visible.sync="dialogVisible">
      <div>
        <el-descriptions
          title="填写人信息"
          :column="1"
          :labelStyle="labelStyle"
          border
        >
          <el-descriptions-item label="问卷调查名称">{{
                                               userAnswerInfo.name
                                               }}
          </el-descriptions-item>
          <el-descriptions-item label="填写人">{{
                                            userAnswerInfo.user
                                            }}
          </el-descriptions-item>
          <el-descriptions-item label="填写时间">{{
                                             userAnswerInfo.time
                                             }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          title="问卷填写信息"
          style="margin-top:20px"
        ></el-descriptions>
        <template v-for="(item, key) in userAnswerList">
          <el-descriptions
            :column="1"
            :key="key"
            :labelStyle="labelStyle"
            style="margin-bottom:20px"
            border
          >
            <el-descriptions-item label="问题名称">{{
                                               item.content
                                               }}
            </el-descriptions-item>
            <el-descriptions-item label="问题类型">{{
                                               item.type
                                               }}
            </el-descriptions-item>
            <el-descriptions-item label="填写结果">{{
                                               item.answer
                                               }}
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
export default {
  name: "questionnaireInfo",
  props: {
    questionInfo: {
      type: Object
    }
  },
  created() {
    this.getPageData()
  },
  data() {
    return {
      exportLoading: false,
      labelStyle: {
        width: "110px",
        textAlign: "center"
      },
      total: 1,
      pageIndex: 1,
      dialogVisible: false,
      userAnswer: [],
      userAnswerList: [],
      userAnswerInfo: {}
    };
  },
  filters: {
    setType(val) {
      let type = "";
      switch (val) {
        case "FILL":
          type = "文本";
          break;
        case "RADIO":
          type = "单选";
          break;
        case "CHECK_BOX":
          type = "多选";
          break;
      }
      return type;
    }
  },
  methods: {
    // 导出调查结果
    async exportQuestionnaireResult() {
      if (!this.userAnswer.length) return this.warning('暂无可导出的调查结果')

      this.exportLoading = true
      const { id: questionnaireId } = this.questionInfo
      let fileDownload = require("js-file-download");
      const { data, headers } = await this.ExportApi.exportQuestionnaire({ questionnaireId })
      const disposition = headers["content-disposition"]
      const fileName = this.getFileName(disposition);
      fileDownload(data, fileName);
      this.exportLoading = false
      this.success('导出成功')
    },
    getPageData() {
      let query = {
        pageSize: 5,
        pageIndex: this.pageIndex,
        questionnaireId: this.questionInfo.id
      }
      this.API.getUserQuestionnairePageListByQuestionnaireId(query).then(ret => {
        let { records, total } = ret.data;
        this.userAnswer = records;
        this.total = total;
      });
    },
    // 返回列表页
    back() {
      this.$emit("back");
    },
    // 查看详情
    view(val) {
      // 设置问卷基础信息
      let {
        answerTime: time,
        userInfo: { name: user },
        questionnaire: { name },
        questionnaireId,
        userId
      } = val;
      this.userAnswerInfo = { time, user, name };
      // 设置选项信息
      this.API.getUserQuestionnaireAnswerRecordByUserAndQuestionnaire({
        questionnaireId,
        userId
      }).then(ret => {
        let userAnswerList = [];
        let { questionList } = ret.data;
        questionList.map(i => {
          let { type, content, optionList, userQuestionnaireAnswer } = i;
          // 设置问题名称
          let answerItem = { content };
          // 设置问题类型
          switch (type) {
            case "FILL":
              answerItem.type = "文本";
              break;
            case "RADIO":
              answerItem.type = "单选";
              break;
            case "CHECK_BOX":
              answerItem.type = "多选";
              break;
          }
          // 设置用户答案
          if (type == "FILL") {
            // 文本答案
            answerItem.answer = userQuestionnaireAnswer?.answer || '';
          } else {
            // 选项答案
            let { optionId } = userQuestionnaireAnswer;
            let option = optionId.split(",");
            let answer = [];
            optionList.map(j => {
              if (option.includes(j.id.toString())) {
                answer.push(j.content);
              }
            });
            answerItem.answer = answer.join("，");
          }
          // 添加
          userAnswerList.push(answerItem);
        });
        this.userAnswerList = userAnswerList;
        this.dialogVisible = true;
      });
    },
    // 分页回调
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getPageData()
    }
  }
};
</script>

<style scoped>
  .desAfter {
    border: 1px solid #ebeef5;
    border-top: none;
    padding: 12px 10px;
    font-size: 14px;
    color: #409eff;
    text-align: center;
  }

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-size: 16px;
  }
</style>
